<!-- 模块说明 -->
<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item class="back-btn" v-show="defaultPath !== '/'"><span @click="backParent">返回上一级</span></el-breadcrumb-item>
      <el-breadcrumb-item>全部文件</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in crumbList" :key="index">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 文件列表 -->
    <div class="fileContainer" v-if="!isNothing">
      <!-- contextmenue绑定右击事件 -->
      <div class="fileList" v-for="(item, index) in bigFile" :key="item.id"
        @dblclick="intoFile(item)" @contextmenu.prevent.stop="rightClick($event, index)">
        <div class="icon">
          <img src="../assets/folder.png" alt="" srcset="" v-if="item.type === 'DIRECTORY'">
          <img src="../assets/unknown.png" alt="" srcset="" v-else>
        </div>
        <div class="fileName">
          <el-input type="text" v-if="isRenaming && (currentIndex === index)" v-model="newName"
            @keyup.enter.native="submitRename(item.name, item.type)"></el-input>
          <p v-else>{{ item.name }}</p>
        </div>
      </div>
      <!-- 右击菜单 -->
      <div class="right-menue" v-show="contextmenueVis" @mouseleave="rightClickBlur">
        <li @click.prevent.stop="toRename">重命名</li>
      </div>
    </div>
    <!-- 空文件夹提示标签 -->
    <div class="nullFile" v-if="isNothing">
      <div class="nothingContainer">
        <img src="../assets/logo.jpg">
        <div>空文件夹</div>
      </div>
    </div>
    <!-- 新建文件夹按钮 -->
    <div class="function-box" @click="showMk">
      <!-- 外围盒子 -->
      <div class="ico-box">+</div>
    </div>
    <!-- 创建文件夹对话框 -->
    <el-dialog
      title="新建文件夹"
      :visible.sync="mkDialogVis"
      width="30%">
      <!-- 文件夹信息表单 -->
      <el-form :model="dirForm" :rules="dirFormRule" ref="dirFormRef" label-width="100px">
        <el-form-item label="文件夹名" prop="name">
          <el-input v-model="dirForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelMkFolder">取 消</el-button>
        <el-button type="primary" @click="mkFolder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBf } from '@/api/getBfList.js'
import { mk, rename } from '@/api/mk.js'
// import { downloadBf } from '@/api/getBigFile.js'
export default {
  // 组件注册
  components: {},
  mixins: [],
  props: [],
  data () {
    return {
      // 大文件信息列表
      bigFile: [],
      // f_user: 'tester1',
      f_user: this.$store.state.user,
      // 默认文件路径
      defaultPath: '/',
      // 面包屑路径列表
      crumbList: [],
      // 空页面判断变量
      isNothing: false,
      // 创建文件夹对话框显示控制变量
      mkDialogVis: false,
      // 新建文件夹表单数据
      dirForm: {
        name: '',
        path: ''
      },
      // 文件夹表单校验规则
      dirFormRule: {
        name: [
          { required: true, message: '请输入文件夹名', trigger: 'blur' }
        ]
      },
      // 右击菜单显隐控件
      contextmenueVis: false,
      // 右击菜单div样式
      contextmenueCss: {
        left: '',
        top: ''
      },
      // 重命名控制变量
      isRenaming: false,
      // 新文件夹名
      newName: '',
      currentIndex: -1
    }
  },
  computed: {
  },
  watch: {},
  methods: {
    // 文件信息获取函数
    async getBfList (path, user) {
      const { data } = await getBf(path, user)
      console.log(data.data.length)
      // 判断列表中data长度，为0说明空文件夹
      if (data.data.length === 0) {
        this.isNothing = true
        console.log(this.isNothing)
      }
      this.bigFile = data.data
    },
    // 切分路径
    getBreadCrumb () {
      this.crumbList = []
      const pathList = this.defaultPath.split('/')
      console.log(pathList)
      for (const i in pathList) {
        if (pathList[i] !== '') {
          this.crumbList.push(pathList[i])
        }
      }
      console.log(this.crumbList)
    },
    // 下载大文件函数
    // async getBigFile (path, name) {
    //   const { data } = await downloadBf(path, this.$store.state.user, name)
    //   console.log(data)
    // },
    // 文件双击事件处理函数
    intoFile (item) {
      console.log(item)
      if (item.type === 'FILE') {
        // this.getBigFile(item.path, item.name)
        window.open(`http://127.0.0.1:8000/bfile/download/?name=${item.name}&path=${item.path}&user=${this.$store.state.user}`)
        // this.$notify({
        //   title: '提示',
        //   type: 'info',
        //   message: '请在所有文件中进行文件下载'
        // })
        return
      }
      // 否则文件类型为文件夹，双击触发进入文件夹操作
      // 默认路径更新为双击文件夹的路径
      this.defaultPath = item.path
      // console.log(this.defaultPath)
      this.getBfList(this.defaultPath, this.f_user)
      this.getBreadCrumb()
    },
    // 返回上一级事件处理函数
    backParent () {
      console.log(this.defaultPath)
      const tartgetIndex = this.defaultPath.lastIndexOf('/')
      // 若最后一个/的下标为0，说明为根路径或一层路径，其返回上一级均为返回根路径
      if (tartgetIndex === 0) {
        this.defaultPath = '/'
        this.getBfList(this.defaultPath, this.f_user)
        // console.log(this.bigFile)
        this.getBreadCrumb()
        this.isNothing = false
        return
      }
      // 否则上一级不是根路径
      const backPath = this.defaultPath.slice(0, tartgetIndex)
      console.log('上一级路径', backPath)
      this.defaultPath = backPath
      this.getBfList(this.defaultPath, this.f_user)
      this.getBreadCrumb()
      this.isNothing = false
    },
    // 添加文件夹按钮点击函数
    showMk () {
      this.mkDialogVis = true
      console.log('创建文件夹路径：', this.defaultPath)
    },
    // 新建文件夹请求
    async postMkFolder () {
      console.log(this.$store.state.user)
      const tmpPath = this.defaultPath + '/' + this.dirForm.name
      console.log('待新建文件夹路径', tmpPath)
      const { data } = await mk(this.$store.state.user, tmpPath)
      console.log(data)
      if (data.status !== 200) {
        this.$notify({
          title: '创建失败',
          message: data.msg,
          type: 'error'
        })
        return
      }
      // 否则创建成功，刷新文件列表
      this.getBfList(this.defaultPath, this.f_user)
      this.dirForm.name = ''
      this.$notify({
        title: '创建成功',
        type: 'success'
      })
    },
    // 添加文件夹会话窗口确认按钮点击函数
    mkFolder () {
      // 校验文件夹名
      this.$refs.dirFormRef.validate((valid) => {
        if (valid) {
          // 校验成功则请求接口
          this.postMkFolder()
          this.mkDialogVis = false
        } else {
          return this.$notify({
            title: '创建失败',
            type: 'error',
            message: '请输入文件夹名称'
          })
        }
      })
    },
    // 添加文件夹会话窗口取消按钮
    cancelMkFolder () {
      this.dirForm.name = ''
      this.mkDialogVis = false
    },
    // 文件div右击事件函数
    rightClick (e, curIndex) {
      // 右键菜单显示
      this.contextmenueVis = true
      // 设置激活游标为当前盒子
      this.currentIndex = curIndex
      // 右键菜单位置为鼠标位置
      document.documentElement.style.setProperty('--left', e.x + 'px')
      document.documentElement.style.setProperty('--top', e.y + 'px')
    },
    // 右击失焦事件
    rightClickBlur () {
      console.log('右键菜单blur事件')
      this.contextmenueVis = false
      // this.currentIndex = -1
      // this.isRenaming = false
    },
    // 重命名按钮点击事件，oldName为item.name
    toRename () {
      console.log('触发重命名事件')
      this.isRenaming = true
      this.newName = ''
    },
    // 提交重命名函数
    async submitRename (oldName, type) {
      console.log(this.newName, oldName, type)
      if (!this.newName || (this.newName === oldName)) {
        this.isRenaming = false
        this.currentIndex = -1
        this.$notify({
          title: '文件(夹)名无变化',
          type: 'info'
        })
        return
      }
      // 否则请求接口
      const { data } = await rename(this.$store.state.user, oldName, this.newName, this.defaultPath, type)
      console.log(data)
      if (data.status === 200) {
        this.$notify({
          title: '修改成功',
          type: 'success'
        })
        this.getBfList(this.defaultPath, this.f_user)
      } else {
        this.$notify({
          title: '修改失败',
          type: 'error',
          message: data.msg
        })
        this.getBfList(this.defaultPath, this.f_user)
      }
      this.isRenaming = false
      this.currentIndex = -1
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getBfList(this.defaultPath, this.f_user)
    this.getBreadCrumb()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  destroyed () {}
}
</script>
<style lang="less" scoped>
  .container {
    padding: 10px;
    .el-breadcrumb {
      padding-bottom: 5px;
      border-bottom: 1px dashed gray;
    }
    .fileContainer {
      display: flex;
      .fileList {
        width: 150px;
        height: 150px;
        margin: 15px 7px;
        padding-top: 20px;
        // 换行
        flex-wrap: wrap;
        // x轴靠左对齐
        justify-content: start;
        // y轴顶部对齐
        align-items: flex-start;
        background-color: #fff;
        .icon {
          img {
            width: 80px;
            height: 80px;
          }
        }
        .fileName {
          line-height: 26px;
          user-select: none;
        }
      }
    }
  }
  .nullFile {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nothingContainer {
    width: 150px;
    height: 150px;
    margin-top: 20px;
    img {
      width: 100%;
      height: 100%;
      vertical-align: bottom;
    }
  }
  .back-btn {
    user-select: none;
    :hover {
      font-weight: bold;
    }
  }
  .function-box {
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 0px 50px 50px 0px;
    // transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: beige;
    text-align: center;
    line-height: 90px;
    transition: transform 0.4s ease-in-out;
    .ico-box{
      font-size: 70px;
      user-select: none;
    }
  }
  .function-box:hover {
    transform: scale(1.1);
  }
  .right-menue {
    position: absolute;
    width: 160px;
    height: 200px;
    left: var(--left);
    top: var(--top);
    background-color: aliceblue;
    box-shadow: 2px 2px 2px rgb(202, 201, 201);
    border-radius: 5px;
    li {
      list-style: none;
      user-select: none;
    }
  }
  .fileName {
    .el-input {
      padding: 5px;
      box-sizing: border-box;
    }
  }
</style>
